<script lang='ts' setup>
import router from '@/router';
import { ref, defineProps, onMounted } from 'vue';
defineProps<{ isMore?: boolean }>()
const emits = defineEmits({ 'more': null })

function onBack(): void {
  router.back();
}

function onMore(): void {
  emits('more');
}

</script>
<template>
  <div class="nav flex">
    <div @click="onBack">
      <t-icon name="chevron-left" size="27" />
    </div>
    <div class="logo"><img src="@/assets/logo.png" alt=""></div>
    <div class="more">
      <t-icon name="ellipsis" size="23" v-if="isMore" @click="onMore" />
    </div>
  </div>
</template>
<style lang='scss' scoped>
.nav {
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px #f5f5f5 solid;

  .logo {
    width: 30%;

    img {
      width: 100%;
      margin-bottom: -7px;
    }
  }

  .more {
    min-width: 27px;
  }
}
</style>